上一讲我们掌握了文件路由的各种使用方法，并用 layouts 特性实现快速页面布局。本节我们继续完善个人博客的功能和用户体验，添加一些图片和 CSS 样式，并且引入目前比较流行的 CSS 库：Tailwindcss。

# 资源目录

Nuxt 项目存放样式、图片等静态资源的目录默认有两个：

• public：会被作为应用程序根目录提供给用户，打包工具不会处理，访问时添加/即可，例如：/logo.png。

xml
复制代码<template>
  <img src="/logo.png" />
</template>

• assets：打包工具会处理，访问时以~开头，例如：~/assets/logo.png。

xml
复制代码<template>
  <img src="~/assets/logo.png" />
</template>

除了~，Nuxt3 中还有一些默认别名：

json
复制代码{
  "~~": "/<rootDir>",
  "@@": "/<rootDir>",
  "~": "/<rootDir>",
  "@": "/<rootDir>",
  "assets": "/<rootDir>/assets",
  "public": "/<rootDir>/public"
}

@前端进阶之旅: 代码已经复制到剪贴板

下面我们引入一个作者头像图片试一下，layouts/default.vue：

xml
复制代码<template>
  <div>
    <nav>
      导航栏
      <img class="avatar" src="~/assets/avatar.png" alt="avatar" />
    </